<%@page import="java.util.Random"%>
<%@page import="java.util.List"%>
<%@page import="java.util.ArrayList"%>
<%@page import="com.wanmait.travel.vo.Scenic"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%String path=request.getServletContext().getContextPath();%>

<!--百度地图  -->
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<style type="text/css">
	body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
	</style>
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=w5yPsggSovz9QO3dQuzur85MA7eYSECD"></script>
	<title>地图展示</title>
</head>
<!--百度地图  -->



<jsp:include page="/inc/header.jsp"></jsp:include>

<%List<Scenic> scenics=(List<Scenic>)request.getAttribute("scenics");%>

	<div style="width:49.9%;height:36px;border:1px solid black;float:left;position:absolute;">
	<label>省份选择：</label>
	<select id="province" name="company">
	<option>请选择</option>
	</select>
	</div>
	<div style="width:49.9%;height:36px;border:1px solid black;float:right;">
	<label>城市选择：</label>
	<select id="city" name="company">
	<option>请选择</option>
	</select>
	<br>
	</div>
	
	
	<div style="float:right;width:100%;height:40px;border:1px solid black;">
	<span>关键词：</span>
	<input id="scenicSearchValue" type="text"  name="travel" >
	<input id="scenicSearch" type="submit" value="搜索" style="width:50px;">
	</div>
	
	
	
	<div style="width:100%;border:1px solid #000;float:left;">
	<form action="<%=path%>/SreachServlet?action=sreachPrice" method="post">
	<span>价位：</span>
	<input type="text" style="width:100px;"name="price_o" value="">~
	<input type="text" style="width:100px;"name="price_t" value="">
	<input type="submit" value ="搜索 " style="width:50px;">
	<input type="button" value="价格降序" id="max" style="width:100px;">
	<input type="button" value="价格升序" id="min" style="width:100px;">
	<a href="/Travel/manager/login.jsp" class="regButton" style="float:right;">.</a>
	</form>
	</div>
	
	
		
<!--百度地图  -->
	<div style="width:40%;height:800px;border:1px solid black;float:left;background:white;color:white;overflow:auto;">
	<div id="allmap"></div>
	</div>
<!--百度地图  -->	
	
	
	
	<div id="scenicInfo"style="width:59.7%;height:800px;border:1px solid black;float:right;background:white;color:black;overflow:auto;">
	<%for(int i=0;i<scenics.size();i++)
	{
		Scenic scenic=scenics.get(i);
	%>
		
		<div  onclick="window.open('<%=path %>/ShowServlet?action=list&id=<%=scenic.getId() %>','_self')"><!--转换成可跳转的空间  -->
		<div onmouseover="pointtest(<%=scenic.getId() %>)" style="width:49.7%;height:500px;background:white;border:1px solid black;float:left;">

		
			<div style="width:99.7%;height:350px;background:white;border:1px solid black; text-align:center;">

			<img src="/Travel/image/<%=scenic.getIntroPic()%>"/>

			</div>
			<div style="width:99.7%;height:60px;background:white;border:1px solid black;">
			<%=scenic.getName()%>
			</div>
			<div style="width:99.7%;height:50px;background:white;border:1px solid black;">
			位置:
			<%=scenic.getLocation()%>
			</div>
			<div style="width:49.7%;height:30px;background:white;border:1px solid black;float:left;">
			开放时间:
			<%=scenic.getOpenTime()%>
			</div>
			<div style="width:48.7%;height:30px;background:white;border:1px solid black;float:right;">
			关闭时间:
			<%=scenic.getCloseTime()%>
			</div>
			
		</div>
		</div>

	<%
	}
	%>
		
	</div>




  
<script type="text/javascript" src="<%=path %>/js/jquery.3.3.1.min.js"></script>
<script type="text/javascript" src="<%=path %>/js/jquery.richUI.min.js"></script>
<script type="text/javascript" src="<%=path %>/js/jquery.browser.min.js"></script>
<script type="text/javascript" src="<%=path %>/js/m.js?<%=new Random().nextInt()%>"></script>
<link rel="stylesheet" href="<%=path %>/css/scenicList.css" />
<script type="text/javascript">
	$(function(){
		$("#max").click(function(){
			
			var pid="<%=path%>/SreachServlet?action=sreachMax";
			
			$.get(pid,function(mes){
				$("#scenicInfo").html(mes);
			});
		});
		
	});
	$(function(){
		$("#min").click(function(){
			
			var pid="<%=path%>/SreachServlet?action=sreachMin";
			
			$.get(pid,function(mes){
				$("#scenicInfo").html(mes);
			});
		});
		
	});

	//坐标变化
	function pointtest(id){
	var url="/Travel/ScenicInfoController?action=sreachTL&id="+id;
	$.get(url,function(mes){
		var TL=mes.split(",");
		map.clearOverlays(); 
		var new_point= new BMap.Point(TL[0],TL[1]);
		var marker = new BMap.Marker(new_point);  // 创建标注
		map.centerAndZoom(point, 16);
		map.addOverlay(marker);              // 将标注添加到地图中
		map.panTo(new_point);     
		
		//原点
		var circle = new BMap.Circle(new_point,1000,{fillColor:"blue", strokeWeight: 1 ,fillOpacity: 0.3, strokeOpacity: 0.3});
	    map.addOverlay(circle);
	    var local =  new BMap.LocalSearch(map, {renderOptions: {map: map, autoViewport: true}});  
	    local.searchNearby("餐馆",new_point,1000);
	})
	}




	/*  百度地图API功能 */
	var map = new BMap.Map("allmap"); 
	var point = new BMap.Point(116.404, 39.915)// 创建Map实例
	map.centerAndZoom(point, 18);  // 初始化地图,设置中心点坐标和地图级别
	new BMap.Icon("http://map.baidu.com/image/us_mk_icon.png");
	
	
	
	
	
	
	
	
	
	/*跳动标记  */
	var marker = new BMap.Marker(point);  // 创建标注
	map.addOverlay(marker);               // 将标注添加到地图中
	marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
	
	
	
	
	
	
	
	
	
	
	/* 控件 */
	 // 添加带有定位的导航控件
	  var navigationControl = new BMap.NavigationControl({
	    // 靠左上角位置
	    anchor: BMAP_ANCHOR_TOP_LEFT,
	    // LARGE类型
	    type: BMAP_NAVIGATION_CONTROL_LARGE,
	    // 启用显示定位
	    enableGeolocation: true
	  });
	  map.addControl(navigationControl);
	  // 添加定位控件
	  var geolocationControl = new BMap.GeolocationControl();
	  geolocationControl.addEventListener("locationSuccess", function(e){
	    // 定位成功事件
	    var address = '';
	    address += e.addressComponent.province;
	    address += e.addressComponent.city;
	    address += e.addressComponent.district;
	    address += e.addressComponent.street;
	    address += e.addressComponent.streetNumber;
	    alert("当前定位地址为：" + address);
	  });
	  geolocationControl.addEventListener("locationError",function(e){
	    // 定位失败事件
	    alert(e.message);
	  });
	
	  
	  
	  
	  
	  
	
	/* 添加地图类型控件 */
	map.addControl(new BMap.MapTypeControl({
		mapTypes:[
            BMAP_NORMAL_MAP,
            BMAP_HYBRID_MAP
        ]}));	  
	map.setCurrentCity("北京");          // 设置地图显示的城市 此项是必须设置的
	map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
	


	$(function(){
		$("#scenicSearch").click(function(){
			var searchValue = $("#scenicSearchValue").val();
			var url="/Travel/ScenicInfoController?action=sreach&travel="+searchValue;
			$.get(url,function(mes){
				$("#scenicInfo").html(mes);
			});
		});
	});
</script>	



<jsp:include page="/inc/footer.jsp"></jsp:include>



